<template>
  <div class="container">
    <Top :signal="signal" :show="isShow" :quantileShow="true" />

    <div v-show="isVisible" class="main">
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="info" label="名称" header-align="center" align="center" />
        <el-table-column
          v-for="(column, index) in tableColumns"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          header-align="center"
          align="center"
        />
        <el-table-column prop="statistic" label="统计量（D值）" header-align="center" align="center" />
        <el-table-column prop="possibility" label="P值" header-align="center" align="center" />
      </el-table>

      <div class="text">
        <h3>说明<i class="el-icon-info" style="margin-left: 10px;" /></h3>
        区分度分析研究数据是否可以有效的区分出高低水平。如果学生的成绩有高有低，高分学生和低分学生可以很好的区分出来，则说明该试卷有着良好的区分性。<br>
        第一：分成高分组和低分组，低于27%分位数的数据则为低分组，27%~73%之间称为中分组；高于73%则称为高分组；<br>
        第二：由于只有2个组别，所以使用t 检验去对比低分组和高分组之间是否有着明显的差异（P &lt; 0.05）；<br>
        第三：如果没有呈现出显著性；说明不同组别下，成绩没有差异；<br>
        第四：对分析进行总结。<br><br>
        <p>
          从上表可以看出，
          <span v-if="tableData.length">
            <span v-for="(item, idx) in tableData" :key="idx">
              <span v-show="item.possibility < 0.05">
                由于{{ item.possibility }} &lt; 0.05，对于{{ item.info }}而言，低分组和高分组之间有着区分性。
              </span>
              <span v-show="item.possibility >= 0.05">
                由于{{ item.possibility }} &gt; 0.05，对于{{ item.info }}而言，低分组和高分组之间并没有良好的区分开。
              </span>
            </span>
          </span>
        </p>
      </div>

      <!-- 表格 -->
      <div class="chart-box">
        <div ref="chartRef" class="chart" />
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import Top from '../top'
import { discrimination } from '@/api/grades'
import * as echarts from 'echarts'

export default {
  name: 'Discrimination',
  components: {
    Top
  },
  data() {
    return {
      isVisible: false,
      tableData: [],
      tableColumns: [] // {label:'hhh',prop:'group1'}
    }
  },
  methods: {
    // 从子组件获得分析结果，并处理
    signal(param) {
      console.log('param = ', param)
      discrimination(param.courseId, param.teacherId, param.quantile, param.semester).then(res => {
        console.log('区分度分析: res => ', res)
        // 清空数据
        this.clear()
        // 获取数据
        const data = res.data
        // 没有数据直接结束
        if (data === null) {
          // 隐藏
          this.isVisible = false
          Message({
            message: '没有相关数据',
            type: 'warning',
            duration: 2000
          })
          return
        }
        // 构造列信息
        let columnName; let i = 1
        data[0].itemList.forEach(item => {
          columnName = `group${i++}`
          // 构造列信息
          this.tableColumns.push({ label: `${item.info}（${item.num}）`, prop: columnName })
        })
        // 构造行
        data.forEach(element => {
          const row = {}
          row.info = element.info
          row.statistic = element.statistic.toFixed(2)
          row.possibility = element.possibility.toFixed(6)
          const columns = element.itemList // 分组
          for (let index = 0; index < this.tableColumns.length; index++) {
            row[this.tableColumns[index].prop] = `${columns[index].mean.toFixed(2)} ± ${columns[index].std.toFixed(2)}`
          }
          this.tableData.push(row)
        })
        console.log('区分度分析：tableDta => ', this.tableData)

        // 展示
        this.isVisible = true
        // 画图
        this.drawChart()
      })
    },
    // 接收子组件发送的消息
    isShow(isVisible) {
      this.isVisible = isVisible
      // 隐藏时，清空数据
      if (!isVisible) {
        this.clear()
      }
    },
    // 清空数据（表格、图表）
    clear() {
      this.tableData = []
      this.tableColumns = []
    },
    // 得到图表的数据
    getData() {
      const legends = []; const groups = []; const series = []
      // 组别
      this.tableColumns.forEach(column => {
        groups.push(column.label)
      })
      this.tableData.forEach(row => {
        legends.push(row.info)
        const data = [] // 数据
        this.tableColumns.forEach(column => {
          // 组别
          if (groups.length === 0) {
            groups.push(column.label)
          }
          // 数据
          data.push(row[column.prop].split(' ')[0]) // row[column.prop] => 60 ± 6；row[column.prop].split(' ')[0] => 60
        })
        series.push({ name: row.info, type: 'bar', data: data })
      })
      return { legends, groups, series }
    },
    // 画图
    drawChart() {
      // 获取数据
      const ret = this.getData()
      const chart = echarts.init(this.$refs.chartRef)

      const option = {
        title: {
          text: '成绩区分度'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ret.legends
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          data: ret.groups
        },
        yAxis: {
          type: 'value'
        },
        series: ret.series
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 30px;

  .main {
    margin-top: 30px;

    .text {
      margin: 30px 0 30px;
      background-color: #F3F9FE;
      padding: 10px;
    }

    .chart-box {
      display: flex;
      justify-content: space-between;

      .chart {
        width: 711px;
        height: 500px;
        margin: 0 auto;
      }
    }
  }
}
</style>
